<!-- 搜索栏页面 -->

<template>
  <div class="resultSearch">
    <button @click="goBack" class="backButton"></button>
    <h1 align="center">搜索结果</h1>

    <table class="searchTab">
          <thead>
            <tr>
              <th>序号</th>
              <th>用户(点击可以跳转)</th>
              <th>地区</th>
              <th>原力值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in paginatedData" :key="index"
            align="center" :class="{highlight: hoverIndex === index}" @mouseover="hoverIndex=index" @mouseleave="hoverIndex=null">
               <td>{{(currentPage-1)*pageSize+index+1}}</td>
               <td @click="homeJump(item)">
                    <span>{{item.nickname || item.name}}</span>
                    <img v-bind:src="item.avatar">
               </td>
               <td>{{item.city}}</td>
               <td>{{item.score}}</td>
            </tr>
              </tbody>

            </table>


            <!-- 页面跳转按钮 -->
            <div class="pageJump">
                 <span class="recordCount">{{ recordCount }} </span>
                 <button @click="onClickPage(currentPage - 1)" :disabled="currentPage === 1" class="next">上一页</button>
                 <button v-for="i in (pageCount < 5 ? pageCount : visiblePageCount)" :key="i" @click="onClickPage(i + firstVisiblePage - 1)">
                       {{ i + firstVisiblePage - 1 }}
                 </button>
                 <button @click="onClickPage(currentPage + 1)" :disabled="currentPage === pageCount" class="next">下一页</button>
            </div>
  </div>
</template>

<script>
import ForceMap from './mapForce.vue'
import RankList from "./rankList.vue";
import { getForceInfo } from '@/server/screen-data'
import 'font-awesome/css/font-awesome.css';

export default {

  data() {
    return {
      UserData: [],//原始用户数据
      UserList: [],//原始的list中用户数据
      searchText:'',//搜索栏之中的字符串
      currentPage: 1,  // 当前页码
      pageSize: 10,    // 每页显示记录条数
      visiblePageCount: 5,//页面分页后，每页最多按钮数量
      hoverIndex: null  //高亮下标
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    //获取原始数据列表,做了缓存处理
    getlist() {
      let cacheData = localStorage.getItem('UserData')
      if (cacheData) {
        this.UserData = JSON.parse(cacheData)
        this.UserData.forEach(city => {
          city.list.forEach(user => {
            this.UserList.push(user)
          })
        })
        return
      }
      getForceInfo().then((res) => {
        if (res.status == 200) {
          this.UserData = res.data.data.cityInfoList
          this.UserData.forEach(city => {
            city.list.forEach(user => {
              this.UserList.push(user)
            })
          })
          localStorage.setItem('UserData', JSON.stringify(this.UserData))
        }
      }).catch(() => {

      })
    },

     //跳转当前页码
     onClickPage(page) {
          if (this.currentPage !== page) {
            this.currentPage = page;
          }
        },
     onClickNextMore() {
          if (this.lastVisiblePage < this.pageCount) {
            this.visiblePageCount += 10;
          }
        },
    //跳转至用户主页
    homeJump(item){
            window.open(`https://blog.csdn.net/`+item.username)
        }


  },
  created() {
        if(this.$route.query.q){
                    this.searchText = this.$route.query.q;
                }else{
                    this.searchText = "";
                }
      },
  mounted() {
      this.getlist()

    },
  watch:{
            '$route.query.q'(newVal){
                 if(newVal!=this.searchText){
                     this.searchText = newVal;
                 }
            }
        },
  computed: {
    //模糊匹配
    filteredUserData() {
    if (!this.searchText.trim()) {
            return []; // 搜索为空，返回空数组
          }
      // 过滤出和searchText匹配的数据
      return this.UserList.filter(item => item.city.includes(this.searchText.trim())||item.nickname.includes(this.searchText.trim()));
    },

    // 计算属性，将当前页的数据切片
    paginatedData() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.filteredUserData.slice(startIndex, endIndex);
      },
    //计算将当前页的数据切片的数量n,总页数
    pageCount() {
      const dataCount = this.filteredUserData.length;
      const n = Math.ceil(dataCount / this.pageSize);
      return n;
    },
    //记录数量
    recordCount() {
        if (this.filteredUserData.length === 0) {
          return "搜索结果为空";
        } else {
          return "共有" + this.filteredUserData.length + "条记录";
        }
      },
     //第一个可显示界面
     firstVisiblePage() {
               const half = Math.floor(this.visiblePageCount / 2);
               let start = this.currentPage - half;
               start = Math.max(start, 1);
               start = Math.min(start, this.pageCount - this.visiblePageCount + 1);
               if(start>0){
                    return start;}
               else
                    return 1;
             },
     lastVisiblePage() {
                    return Math.min(this.pageCount, this.firstVisiblePage + this.visiblePageCount - 1);
                  },
  },
};
</script>


<style lang="scss">
h1{
    color: #77C0FF;
}
.backButton{
    margin: 10px 10px;
    width: 60px;
    height: 40px;
    background-color: #1E466E;
    background-image: url("@/assets/img/go-back.png");
    background-size: 100% 100%;
}
table.searchTab{
    margin:40px auto;
    width:1000px;
    border-collapse: collapse;
    color: #77C0FF;
    font-size: 18px;
    background-image: url("@/assets/img/rightslide.png");
    background-size: 100% 100%;
}
table.searchTab th{
    align-content: center;
    width: 100px;
    height: 50px;
    color: #77C0FF;
}
table.searchTab tr{
    align-content: center;
    width: 100px;
    height: 50px;
    color: #77C0FF;
}
table.searchTab td{
    align-content: center;
    width: 100px;
    height: 50px;
    color: #77C0FF;
    vertical-align: middle;
        span{
            display: inline-block;
            vertical-align: middle;
        }
        img{
            margin:5px 5px;
            width: 40px;
            height: 40px;
            vertical-align: middle;
        }
}
.msg {
  text-align: center;
  color: #999;
  font-size: 25px;
  margin-top: 20px;
}
.pageJump{
    margin-top: 0px;
    margin-left: 800px;
}
.pageJump button{
  margin-left: 8px;
  width: 30px;
  height: 30px;
  color: #77C0FF;
  background-color: #1E466E;
  border: none;
  border-radius: 4px;
  font-weight: bold;
}
.pageJump button:hover{
  background-color: #235B8E;
}
.pageJump button:focus {
  outline: none;
}
.pageJump button span{
  color: #77C0FF;
}
.pageJump .next{
    width: 100px;
    height: 30px;
}
.highlight {
      background-color: #235B8E;
   }
.recordCount{
      color: #77C0FF;
      font-size: 25px;
}


</style>
